<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 100vw;
            height: 100vh;
            background-color: #F0F0F0;
            display: flex;
        }
        .aside{
            background-color: #3662EB;
            min-width: 230px;
            display: flex;
            flex-direction: column;
            /* align-items: center; */
            color: white;
        }
        .aside > a{
            width: 100%;
        }
        .main{
            flex-grow: 1;
            background-color:lightgrey;
        }
        a{
            text-decoration: none;
            color:inherit;
        }
        .logo{
            font-size: 25px;
            line-height: 60px;
            text-align:center;
        }
        .nav{
            display: flex;
            flex-direction: column;
        }
        .nav >a{
            line-height: 50px;
            padding-left: 20px;
            transition: all 0.2s;
        }
        .nav [class^="icon"]{
            font-size: 25px;
            margin-right: 5px;
            color: #afc0f7;
            vertical-align: -3px;
        }
        .nav a:hover{
            background-color: rgba(255,255,255,.3);
        }
        .main{
            display: flex;
            flex-direction: column;
        }
        .main > .header{
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 60px;
            background-color: white;
            padding: 0 20px;
            box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .3);
        }
        .main > .app-container{
            flex-grow: 1;
        }
        .avatar{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 5px;
        }
        .avatar > img{
            width:100%
        }
        .header .info{
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-right: 5px;
        }
        .btn{
            padding:0 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            height: 40px;
            line-height: 40px; 
        }
        .btn-danger{
            background-color: #F56C6C;
            color: white;
        }
        iframe{
            width: 100%;
            height: 100%;
        }
    </style>
    
</head>
<body>
    <div class="container">
        <div class="aside">
            <a href="#" class="logo">思诚在线实训平台</a>
            <div class="nav">
                <a href="./user.html" target="content"><i class="iconfont icon-yonghu"></i>用户管理</a>
                <a href="./score.html" target="content"><i class="iconfont icon-chengji-"></i>成绩管理</a>
            </div>
        </div>
        <div class="main">
            <div class="header">
                <div class="info">
                    <div class="avatar">
                        <img src="./img/1.jpg">
                    </div>
                    <span class="nickname">聂筠峰</span>
                </div>
                <button class="btn btn-danger">退出</button>
            </div>
            <div class="app-container">
                <iframe name="content" src="./user.html" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</body>
</html>